<script setup>
import { ref } from 'vue'
import { getLoopData, getShowData } from '../../api/loop'
import { addOrder } from '../../api/user'
import { useRouter } from 'vue-router';
const loopData = ref([])
const showData = ref([])
const router = useRouter()
function jumpdetail(item) {
    console.log(item);
    router.push({
        name: 'detail',
        params: {
            cont: item
        }
    })
}
getLoopData()
    .then((res) => {
        loopData.value = res.data.data
    }
    )
getShowData()
    .then((res) => {
        showData.value = res.data.data
    }
    )
function addOrderData(item) {
    let _buy = '1'

    if (item.isshow == false) {
        _buy = "2"
    }
    let data = {
        name: item.name,
        url: item.url,
        buy: _buy
    }
    addOrder(data)
    console.log(data);
}
function addOrders(item) {
    let data = {
        name: item.name,
        url: item.url,
        buy: "0"
    }
    addOrder(data)
}
</script>
<template>
    <div class="bg">
        <el-carousel class="carousel" :interval="3000" height="400px">
            <el-carousel-item v-for="item in loopData" :key="item">
                <img :src="item.url" :alt="item.alt" class="carimg">
                <h2 class="cartext">{{ item.alt }}</h2>
            </el-carousel-item>
        </el-carousel>
        <div class="mainbody" v-for="item in showData" :key="item.id">
            <img :src="item.url" alt="" class="showimg" @click="jumpdetail(item)">
            <div class="massage">
                <h3>{{ item.name }}</h3>
                地点：<span class="pds">{{ item.location }}</span>
                时间：<span class="pds">{{
                    (item.date[0].split('-').slice(1).join('-')) + "到" + (item.date[1].split('-').slice(1).join('-'))
                }}</span>
                <p class="place">{{ item.place }}</p>
                <el-rate v-model="item.star" disabled show-score text-color="#ff9900" />
            </div>
            <div class="bugs">
                <el-button v-if="item.isshow == true" type="success" @click="addOrderData(item)">立即购买</el-button>
                <el-button v-if="item.isshow == false" type="primary" @click="addOrderData(item)">立即预约</el-button>
                <el-button type="warning" @click="addOrders(item)">加入订单</el-button>
            </div>
        </div>
    </div>
    <el-backtop :right="100" :bottom="100" />
</template>
<style scoped>
.bg {
    background: fixed url('../../assets/bg.png') no-repeat;
    background-size: cover;
}

.carousel {
    width: 1000px;
    margin: auto;
    position: relative;
}

.carimg {
    width: 100%;
    height: 100%;
}

.cartext {
    position: absolute;
    left: 500px;
    bottom: 30px;
}

.mainbody {
    width: 1000px;
    margin: 30px auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.mainbody .showimg {
    width: 150px;
    height: 200px;
}

.massage {
    width: 400px;
    margin-left: 50px;
}

.pds {
    color: orange;
    padding: 20px;
}

.place {
    font-size: 12px;
}
</style>